<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板编译-数组join法</title>
</head>

<body>
    <ul id="container"></ul>
</body>
<script>
    const container = document.getElementById('container')
    const arr = [
        { name: '张三', age: '17', gender: 'man' },
        { name: '李四', age: '17', gender: 'man' },
        { name: '王五', age: '17', gender: 'man' },
        { name: '赵六', age: '17', gender: 'man' },
    ]

    arr.forEach(item => {
        const template = [
            '<li>',
            '   <ol>',
            '       <li>姓名：' + item.name + '</li>',
            '       <li>年龄：' + item.age + '</li>',
            '       <li>性别：' + item.gender + '</li>',
            '   </ol>',
            '</li>'
        ].join(' ')
        container.innerHTML += template
    })

</script>

</html>